<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AwesomeProject - 智能博客平台</title>
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/css/components.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <i class="fas fa-blog"></i>
                <span>AwesomeProject</span>
            </div>
            <div class="nav-menu">
                <a href="#" class="nav-link active">首页</a>
                <a href="#" class="nav-link">分类</a>
                <a href="#" class="nav-link">关于</a>
            </div>
            <div class="nav-actions">
                <button class="search-btn"><i class="fas fa-search"></i></button>
                <button class="theme-toggle"><i class="fas fa-moon"></i></button>
                <button class="login-btn">登录</button>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3>分类</h3>
                <ul class="category-list">
                    <li><a href="#" class="category-item active">全部</a></li>
                    <li><a href="#" class="category-item">技术分享</a></li>
                    <li><a href="#" class="category-item">项目经验</a></li>
                    <li><a href="#" class="category-item">学习笔记</a></li>
                    <li><a href="#" class="category-item">生活随笔</a></li>
                </ul>
            </div>
            <div class="sidebar-section">
                <h3>热门标签</h3>
                <div class="tag-cloud">
                    <span class="tag">JavaScript</span>
                    <span class="tag">Go</span>
                    <span class="tag">React</span>
                    <span class="tag">AI</span>
                    <span class="tag">数据库</span>
                </div>
            </div>
        </aside>

        <!-- 内容区域 -->
        <section class="content">
            <!-- 搜索栏 -->
            <div class="search-section">
                <div class="search-box">
                    <input type="text" placeholder="搜索文章..." class="search-input">
                    <button class="search-submit"><i class="fas fa-search"></i></button>
                </div>
            </div>

            <!-- 文章列表 -->
            <div class="posts-container">
                <div class="post-card">
                    <div class="post-header">
                        <h2 class="post-title">深度学习入门指南</h2>
                        <div class="post-meta">
                            <span class="author"><i class="fas fa-user"></i> smartuser</span>
                            <span class="date"><i class="fas fa-calendar"></i> 2025-08-31</span>
                            <span class="category"><i class="fas fa-tag"></i> 技术分享</span>
                        </div>
                    </div>
                    <div class="post-content">
                        <p>深度学习是机器学习的一个分支，它模仿人脑神经网络的工作方式。本文将介绍深度学习的基本概念、常用算法如CNN、RNN、LSTM等...</p>
                    </div>
                    <div class="post-footer">
                        <div class="post-stats">
                            <span><i class="fas fa-eye"></i> 128</span>
                            <span><i class="fas fa-heart"></i> 24</span>
                            <span><i class="fas fa-comment"></i> 8</span>
                        </div>
                        <button class="read-more-btn">阅读更多</button>
                    </div>
                </div>

                <div class="post-card">
                    <div class="post-header">
                        <h2 class="post-title">Go语言并发编程实践</h2>
                        <div class="post-meta">
                            <span class="author"><i class="fas fa-user"></i> admin</span>
                            <span class="date"><i class="fas fa-calendar"></i> 2025-08-30</span>
                            <span class="category"><i class="fas fa-tag"></i> 项目经验</span>
                        </div>
                    </div>
                    <div class="post-content">
                        <p>Go语言的并发模型基于goroutine和channel，提供了简洁而强大的并发编程能力。本文将通过实际案例展示如何在项目中有效使用Go的并发特性...</p>
                    </div>
                    <div class="post-footer">
                        <div class="post-stats">
                            <span><i class="fas fa-eye"></i> 256</span>
                            <span><i class="fas fa-heart"></i> 45</span>
                            <span><i class="fas fa-comment"></i> 12</span>
                        </div>
                        <button class="read-more-btn">阅读更多</button>
                    </div>
                </div>

                <div class="post-card">
                    <div class="post-header">
                        <h2 class="post-title">前端开发最佳实践</h2>
                        <div class="post-meta">
                            <span class="author"><i class="fas fa-user"></i> developer</span>
                            <span class="date"><i class="fas fa-calendar"></i> 2025-08-29</span>
                            <span class="category"><i class="fas fa-tag"></i> 学习笔记</span>
                        </div>
                    </div>
                    <div class="post-content">
                        <p>现代前端开发涉及众多技术栈和工具链，如何在复杂的生态系统中选择合适的技术方案是每个前端开发者都需要面对的问题...</p>
                    </div>
                    <div class="post-footer">
                        <div class="post-stats">
                            <span><i class="fas fa-eye"></i> 189</span>
                            <span><i class="fas fa-heart"></i> 32</span>
                            <span><i class="fas fa-comment"></i> 15</span>
                        </div>
                        <button class="read-more-btn">阅读更多</button>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <button class="page-btn" disabled><i class="fas fa-chevron-left"></i></button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn"><i class="fas fa-chevron-right"></i></button>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 AwesomeProject. 智能博客平台 - 让知识分享更简单</p>
        </div>
    </footer>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <button class="modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <form class="login-form">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-input" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-input" placeholder="请输入密码">
                    </div>
                    <button type="submit" class="submit-btn">登录</button>
                </form>
                <div class="modal-footer">
                    <p>还没有账号？<a href="#" class="register-link">立即注册</a></p>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/main.js"></script>
</body>
</html>